<template>
	<view class="taskDetail">
		<!-- <uni-tabchange :isCoverview="true" :activeTab="activeTab" :tabArr="tabArr" :isFixed="true" @tabChangeSuccess="tabChangeSuccess"></uni-tabchange> -->
		<uni-tabchange :activeTab="activeTab" :tabArr="tabArr" :isFixed="true" @tabChangeSuccess="tabChangeSuccess"></uni-tabchange>
		<!-- 打卡内容 -->
		<view class="taskCon commonModule" v-if="activeTab==0">
			<view class="title bold font16"><text class="font12">标题</text>{{taskInfo.title}}</view>
			<rich-text :nodes="taskInfo.goodNodes"></rich-text>
		</view>
		<!-- 笔记列表 -->
		<view class="noteCon commonModule" v-if="activeTab==1">
			<template v-for="(item,index) in noteData">
				<uni-question class="quesBoxItem" :quesItem="item" :key="index"></uni-question>
			</template>
			<uni-nodata v-if="noteData.length==0" :iconStyle="{margin:'100rpx 0 0'}"></uni-nodata>
		</view>
		<!-- 问答列表 -->
		<view class="ask commonModule" v-if="activeTab==2">
			<template v-for="(item,index) in quesData">
				<uni-question class="quesBoxItem" :quesItem="item" :key="index"></uni-question>
			</template>
			<uni-nodata v-if="quesData.length==0" :iconStyle="{margin:'100rpx 0 0'}"></uni-nodata>
		</view>
		<!-- 底部操作 -->
		<view class="fixedB flex alignCenter justConBetween">
			<view class="flex alignCenter oper">
				<view class="operOne" @click.stop="taskOper('like')">
					<image :src="taskInfo.isLiked?'https://image.alhelp.net/uploads/20231104/c9f5e3a3e5ed54bfb52cb4acaff6245d.png':'https://image.alhelp.net/uploads/20231104/718c395eb3db60582c396acec8a85fc6.png'" mode="widthFix"></image>
					<view class="font14">点赞<text class="mathMagrin">{{taskInfo.likedTotal}}</text></view>
				</view>
				<view class="operOne" @click.stop="taskOper('share')">
					<image src="https://image.alhelp.net/uploads/20231104/db05a877babde8bbcce75893aced0760.png" mode="widthFix"></image>
					<view class="font14">转发</view>
				</view>
			</view>
			<view class="flex alignCenter btn">
				<view class="noWidthBtn" @click="clickHandle('ques')">提问</view>
				<view class="noWidthBtn" @click="clickHandle('note')" v-if="taskInfo.state==1">打卡</view>
			</view>
		</view>
		<uni-login @closeLogin="closeLogin" :loginShow="isLoading"></uni-login>
	</view>
</template>

<script>
	import { taskDetail,noteList,taskQuesList } from "@/api/send.js"
	import { likeOrNot } from "@/api/index.js"
	import { navigateLoginPage } from "@/utils/common.js"
	import uniLogin from '@/components/uni-login/uni-login.vue'
	export default {
		components: {
			uniLogin
		},
		data() {
			return {
				isLoading:false,
				activeTab:0,
				tabArr:[{
					title:'任务内容'
				},{
					title:'打卡笔记'
				},{
					title:'问答'
				}],
				taskInfo:'',
				taskId:'',
				page:1,
				pageSize:20,
				pageTotal:0,
				noteData:[],
				quesData:[],
				groupId:''
			};
		},
		onLoad(option) {
			uni.removeStorageSync('previewImg')
			this.taskId=option.id?option.id:''
			this.groupId=option.groupId?option.groupId:''
			this.getDetail()
		},
		onShow() {
			if(uni.getStorageSync('previewImg')) return
			this.initPage()
			if(this.activeTab==0){
				this.getDetail()
			}else if(this.activeTab==1){
				this.getNoteList()
				return
			}else if(this.activeTab==2){
				this.getQuesList()
				return
			}
		},
		onUnload() {
			// uni.$off('tabChangeSuccess')
			uni.removeStorageSync('previewImg')
		},
		methods:{
			closeLogin(){
				this.isLoading = false;
			},
			initPage(){
				this.page=1;
				this.noteData=[];
				this.quesData=[];
			},
			// 任务详情
			getDetail(){
				taskDetail({id:this.taskId}).then((res)=>{
					if(res.code==100000){
						this.taskInfo=res.data
						this.dealListData()
					}
				})
			},
			// 笔记列表
			getNoteList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let param={
					page:this.page,
					size:this.pageSize,
					taskId:this.taskId
				}
				noteList(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						this.noteData=this.noteData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
						this.tabArr[1].title='打卡笔记'
						this.tabArr[1].title=`${this.tabArr[1].title}(${res.data.total})`
					}
				}).catch((err)=>{uni.hideLoading()})
			},
			//问答列表
			getQuesList(){
				let param={
					page:this.page,
					size:this.pageSize,
					taskId:this.taskId
				}
				taskQuesList(param).then((res)=>{
					if(res.code==100000){
						this.quesData=this.quesData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
						this.tabArr[2].title='问答'
						this.tabArr[2].title=`${this.tabArr[2].title}(${res.data.total})`
					}
				})
			},
			//操作
			taskOper(type){
				if(type=='like'){
					let param={
						type:6,//同提问的type一致
						typeId:this.taskId,
						isLiked:!this.taskInfo.isLiked
					}
					likeOrNot(param).then((res)=>{
						if(res.code==100000){
							this.taskInfo.isLiked=!this.taskInfo.isLiked
							if(this.taskInfo.isLiked){
								this.taskInfo.likedTotal=Number(this.taskInfo.likedTotal)+1
								return
							}else{
								this.taskInfo.likedTotal=Number(this.taskInfo.likedTotal)-1
								return
							}
						}
					})
				}else if(type=='share'){
					if(!uni.getStorageSync('token')){
						// #ifdef MP-WEIXIN
						this.isLoading = true;
						// #endif
						// #ifndef MP-WEIXIN
						navigateLoginPage()
						// #endif
						return
					}
					// inviteType 1提问者邀请；2最佳回答者邀请；3普通用户的提问邀请；4邀请加入小组；5任务打卡邀请
					let query={
						id:this.taskInfo.id,
						inviteType:5,
						groupId:this.groupId
					}
					uni.navigateTo({
						url:'/pages/school/share/share?query='+JSON.stringify(query)
					})
				}
				
			},
			dealListData(){
				let richNodes=JSON.parse(this.taskInfo.content)
				let param={
					name:'div',
					children:[]
				}
				richNodes.forEach((item)=>{
					if(item.type=='text'){
						param.children.push({
							type:'text',
							text:item.content
						})
					}
					if(item.type=='image'){
						param.children.push({
							name:'img',
							attrs:{
								src:item.url,
								style: 'width:100%'
							}
						})
					}
				})
				this.taskInfo.goodNodes=[param]
				console.log(this.taskInfo)
			},
			// tab切换
			tabChangeSuccess(obj){
				this.activeTab=obj.activeTab
				this.initPage()
				if(this.activeTab==0){
					this.getDetail()
				}else if(this.activeTab==1){
					this.getNoteList()
					return
				}else if(this.activeTab==2){
					this.getQuesList()
					return
				}
				
			},
			// 提问、打卡
			clickHandle(type){
				if(type=='ques'){
					uni.navigateTo({
						url:`/pages/send/question/question?from=task&id=${this.taskId}&title=${this.taskInfo.title}&type=ques&groupId=${this.groupId}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/send/question/question?from=task&id=${this.taskId}&title=${this.taskInfo.title}&type=note&groupId=${this.groupId}`
					})
				}
				
			}
		},
		onPullDownRefresh() {
			this.initPage()
			if(this.activeTab==0){
				this.getDetail()
			}else if(this.activeTab==1){
				this.getNoteList()
			}else if(this.activeTab==2){
				this.getQuesList()
			}
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				if(this.activeTab==1){
					this.getNoteList()
					return
				}else if(this.activeTab==2){
					this.getQuesList()
					return
				}
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.taskDetail{
	padding: 0 0 120rpx;
	box-sizing: border-box;
}
.commonModule{
	
}
.taskCon{
	padding: 30rpx;
	box-sizing: border-box;
	.title{
		margin:0 0 30rpx;
		text{
			padding:3rpx 10rpx;
			display: inline-block;
			margin:0 10rpx 0 0;
			border-radius: 5rpx;
			background: $colorMain;
		}
	}
}
.noteCon,
.ask{
	// background:$pageBgColor;
	// padding:0 0 20rpx;
	box-sizing: border-box;
	.quesBoxItem{
		// margin:0 0 20rpx;
		border-bottom: 20rpx solid $pageBgColor;
	}
}
.fixedB{
	position: fixed;
	bottom:0;
	left: 0;
	width: 100%;
	box-shadow: 0 0 10rpx rgba(0,0,0,.2);
	background: #fff;
	padding: 15rpx 30rpx 30rpx;
	box-sizing: border-box;
	z-index: 20;
	image,
	cover-image{
		width: 40rpx;
		height: 40rpx;
		display: block;
		margin: 0 auto;
	}
	.oper{
		flex:1;
		.operOne{
			margin:0 40rpx 0 0;
		}
	}
	.btn{
		.noWidthBtn{
			margin:0 0 0 40rpx;
			padding: 10rpx 40rpx;
		}
	}
}
</style>
